<template>
	<style>
		.box-container {
			width:200px;
			margin: 10px auto;
		}	
	</style>
	<theme-box title="发送消息维护">
		<form class="form-inline clearfix" @submit.prevent v-el:searchform>
      <ul class="nav nav-tabs" v-el:nav>
				<li class="active" data-type="0"><a href="javascript:void(0)">关注自动回复</a></li>        
				<!-- <li data-type="1"><a href="javascript:void(0)">消息自动回复</a></li> -->
				<li data-type="2"><a href="javascript:void(0)">关键字自动回复</a></li> 
     		<v-button v-if="type==2" class="pull-right" @click="createRule">自动回复增加</v-button>       
      </ul>
      
		</form> 
		<!-- 关注自动回复 -->
		<div v-show="type==0">
			<div class="panel-body">
				<app-box v-ref:autobox></app-box>
				<div class="wizard-buttons">
					<div class="row">
						<div class="col-sm-12">
							<div class="text-center">
								<v-button theme="primary" @click="initSubmit" class="col-sm-offset-1 pull-left">确认</v-button>									
							</div>
						</div>
					</div>
				</div>				
			</div>			
		</div>
		<!-- 消息自动回复 -->
		<div v-show="type==1">
		  <!-- :news="false" -->
			<div class="panel-body">
				<app-box v-ref:box></app-box>
				<div class="wizard-buttons">
					<div class="row">
						<div class="col-sm-12">
							<div class="text-center">
								<v-button theme="primary" @click="autoSubmit" class="col-sm-offset-1 pull-left">确认</v-button>									
							</div>
						</div>
					</div>
				</div>				
			</div>
		</div>
		<!-- 关键字自动回复 -->
		<div v-show="type==2">
			<app-keyword v-ref:keytable></app-keyword>
		</div>
	</theme-box>
	<modal-container v-ref:modalkeyword title="自动回复增加">
		<div class="modal-body">
			<!-- <form v-el:form> -->
				<div class="row">
							<!-- <form-input title="规则名" name="rule" v-ref:rule></form-input> -->
						<form-input title="关键字" name="keywords" v-ref:keywords :maxlength="16"></form-input>
						<form-group left="4" title="回复内容"></form-group>														  	
				</div>
			<!-- </form> -->			
			<app-box v-ref:keybox></app-box>
		</div>
		<div class="modal-footer">           
			<v-button theme="primary" class="pull-left" @click="ruleResolve">确认</v-button>
			<v-button @click="ruleReject">取消</v-button>
		</div>				
	</modal-container>
</template>

<script>
  import keyWord from './send.keyword.vue';
	import Box from 'pages/partial/box.vue';	
	export default {
		data: () => ({
			type: 0,
			//关注自动回复
			initContent:"",
			initIsSet: false,
			//消息自动回复
			autoContent:"",
			autoIsSet: false
		}),
		components: {
			'app-keyword': keyWord,
			'app-box': Box		
		},				
		methods: {
			createRule() {
				//$(this.$els.modalkeyword).find("form")[0].reset();
				this.$refs.keywords.reset();
				this.$refs.keybox.clear();				
				this.$refs.modalkeyword.init();
			},
			ruleResolve() {
				if(!this.$refs.keywords.get()) {
					let message = {
						title:"操作提示",
						content:"关键字不能为空"
					}							
					Midway.alert(message);					
					return false;
				}
				if(this.$refs.keybox.valid()){						
						let data = this.$refs.keybox.get();
						//data.name = this.$refs.rule.get();
						data.keywords = this.$refs.keywords.get();
						this.$operate({
							url: '/api/v1' + projectName_Url + '/wechat/respMsg/add.html',
							data
						}).then( response => {
							let message = {
								title:"操作提示",
								content:"关键字回复提交成功"
							}							
							Midway.alert(message);
							this.$refs.modalkeyword.hide();								
							this.$refs.keytable.reset();							
						},error => {});						
				}						

			},
			ruleReject() {
				this.$refs.modalkeyword.hide();				
			},
			initSubmit() {		
				//提交关注自动回复
				let self = this;
				if(this.initIsSet) {
					//update
				} else {
					//insert
					if(this.$refs.autobox.valid()){						
						let data = this.$refs.autobox.get();
						data.subscribe = data.msgType;
						delete data.msgType;				
						self.$operate({
							url: '/api/v1' + projectName_Url + '/wechat/respMsg/add.html',
							data
						}).then( response => {
							let message = {
								title:"操作提示",
								content:"关注自动回复提交成功"
							}							
							Midway.alert(message)							 
						},error => {});						
					}		
				}				
			},
			autoSubmit() {
				//提交消息自动回复
				let self = this;
				if(this.autoIsSet) {
					//update
				} else {
					//insert
					if(this.$refs.box.valid()){						
						let data = this.$refs.box.get();
						self.$operate({
							url: '/api/v1' + projectName_Url + '/wechat/respMsg/add.html',
							data
						}).then( response => {
							let message = {
								title:"操作提示",
								content:"消息自动回复提交成功"
							}
							Midway.alert(message)							 
						},error => {});												
					}						
					
				}					
			}
		},
		beforeCompile() {
			let self = this;
	
		},
		ready() {
		  let self = this;
			
			let data = {
				mchtId : localStorage.getItem('get_id')
			}			
			//当前关注自动回复		
			self.$post({
				url: '/api/v1' + projectName_Url + '/wechat/respMsg/querySubcribe.html',
				data
			}).then( response => {

				let obj = response.content.subcribeList[0];
				self.$refs.autobox.$set("msgType",obj.msgType);
				if(obj.msgType == "image") {		
					 let _id = {
						 media: obj.mediaId,
					 }					 
					 obj.id = _id;					 
//					 obj.name = _obj.name;
//					 obj.url = _obj.url;					
					 self.$refs.autobox.setPhoto(obj);
				} else if(obj.msgType == "news") {
					 let _obj = response.content.fodderList[0];
					 let _id = {
						 media: obj.mediaId,
						 artId: _obj.artId
					 }					 
					 obj.id = _id;					 
					 obj.name = _obj.name;
					 obj.url = _obj.url;
					
					 self.$refs.autobox.setResource(obj);
				} else if(obj.msgType == "text") {
					 self.$refs.autobox.$set("content",obj.content);
				}
			});		
			
			//选项卡
			$(this.$els.nav).find("li").click(function() {
				$(this).addClass("active").siblings().removeClass("active");
				let type = $(this).data("type");
				self.$set("type",type);		
			})
						
//			$(this.$els.form).validate({
//				rules: {
//					keywords: {
//						required: true,
//						maxlength: 16
//					}
//				},
//				messages: {
//					keywords: {
//						required: "关键字为必填项",
//						maxlength: "关键字不大于16字"
//					}
//				}
//			});			
		}
	}
</script>